<template>
  <div>
    <el-card class="box-card">
  <div class="header">
      <el-button style="float: right" type="success" @click="open('add')"> <svg-icon icon-class="edit"></svg-icon>添加菜单</el-button>
    </div>
  <el-table
   v-loading="loading"
  default-expand-all
  row-key="id"
    :tree-props="{children: 'childs'}"
    :data="tableData"
    stripe
    style="width: 100%">
    <el-row>
   <el-col :span="4">
      <el-table-column
      prop="code"
      label="权限点代码"
      width="900">
    </el-table-column>
   </el-col >
   <el-col :span="16">
       <el-table-column
      prop="title"
      label="标题"
      width="180">
       <template #default="{row}">
        <i class='el-icon-document' v-if="!row.is_point && !row.childs"></i>
        <i class='el-icon-view' v-else-if="row.is_point"></i>
     <i class='el-icon-folder-opened' v-else-if="row.childs" ></i>
          <span style="margin-left: 10px">{{row.title}}</span>
      </template>
    </el-table-column>

   </el-col>
   <el-col :span="4">
     <el-table-column
      header-align="center" align="center"
     fixed="right"
      label="操作">
        <template #default="{row}">
              <div class="actions">
                  <el-button type="primary" icon="el-icon-edit" circle plain @click="open('edit',row)"></el-button>
                  <el-button type="danger" icon="el-icon-delete" circle plain @click="del(row.id)"></el-button>
              </div>
            </template>
    </el-table-column>
   </el-col>
    </el-row>
  </el-table>
</el-card>
    <MenuAdd
    ref="editMenu"
    :text="text"
    :pageTitle="pageTitle"
    :PermissionGroupsList="PermissionGroupsList"
    @handleCloseModal="handleCloseModal"
    @newDataes="newDataes"
    ></MenuAdd>
  </div>
</template>

<script>
import { simple } from '@/api/base/permissions'
import MenuAdd from '@/module-manage/components/menu-add'
import { list, remove } from '@/api/base/menus.js'
export default {
  components: {
    MenuAdd
  },
  data () {
    return {
      loading: true,
      type: '',
      tableData: [],
      queryObj: {
        page: 1,
        pageSize: 10
      },
      icon: '',
      icon1: '',
      icon2: '',
      flag1: false,
      flag2: false,

      pageTitle: '菜单',
      PermissionGroupsList: []
    }
  },

  async created () {
    this.initData()
  },
  computed: {
    text () {
      if (this.type === 'add') return '添加'
      if (this.type === 'edit') return '编辑'
      else return ''
    }
  },
  methods: {
  // TODO 图标
    async  initData () {
      const res = await list(this.queryObj)
      this.tableData = res.data
      this.loading = false
    },
    // 权限列表
    async setupData () {
      const res = await simple()
      this.PermissionGroupsList = res.data
    },
    // 打开弹窗
    open (type, row) {
      this.type = type
      this.$refs.editMenu.dialogFormV()
      this.$refs.editMenu.handleResetForm()
      this.setupData()
      if (this.type === 'edit') {
        const flag = row.is_point ? 'points' : 'menu'
        this.$refs.editMenu.changeType(flag)
        this.$refs.editMenu.hanldeEditForm(row.id)
      }
    },
    // 退出
    handleCloseModal () {
      this.$refs.editMenu.dialogFormH()
    },
    // 确认之后
    newDataes () {
      this.initData()
      this.$refs.editMenu.handleResetForm()
    },
    async del (id) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const obj = { id }
        await remove(obj)
        this.initData()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped lang='less'>
/deep/ .el-table th {
  background-color: #fafafa;
}
.box-card{
   margin: 10px auto;
  width: 95%;
  padding: 20px;
  border: 1px solid #ebeef5;
    background-color: #fff;
    color: #303133;
    -webkit-transition: .3s;
    transition: .3s;
}
</style>
